<template>
    <h3 class="sonTit">评论他的</h3>
    <div class="sonncmm">
        <div class="sonncmmtop">
            <div class="sonuserContent">
                <div class="sonuserImg"><van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" /></div>
                <div class="sonuserTitle">{{ newObj.user_nick_name }}</div>
            </div>
            <div class="sonuserRight"><van-icon name="good-job-o" v-show="!flat" @click="addLikes(newObj)" /><van-icon name="good-job" v-show="flat" @click="addLikes(newObj)" /> {{ num }}</div>
        </div>
        <div class="sonncmmMain">
            <p>{{ newObj.content }}</p>
            <div class="sonreply">
                <span>{{ moment(newObj.create_time).format("YYYY-MM-DD hh:mm:ss") }}</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { Popup, Field, CellGroup } from "vant";
import { searchUserNickName, addLike, changeLike, selectLike } from "@/request/index";
import { defineProps, toRef, ref, onMounted, computed } from "vue";
import moment from "moment";
let user_id = localStorage.getItem("token");
let commentItemObj = defineProps(["item"]);
let newObj = toRef(commentItemObj, "item");
console.log(commentItemObj);
let username = ref("");
let sonTxt = ref("");
let num = ref(0);
let flat = ref(true);
const addLikes = (x) => {
    // console.log(x.id, 8484);
    addLike({ user_id: user_id, user_db: "news_comment", comment_id: x.comment_id, detail_id: x.id })
        .then((data) => {
            if (data.flat == 1) {
                flat.value = true;
            } else {
                flat.value = false;
            }
        })
        .then(() => {
            changeLike({ detail_id: x.id, user_db: "news_comment" }).then((data2) => {
                num.value = data2.rows[0]["count(*)"];
            });
        });
};

const init = (x) => {
    changeLike({ detail_id: x.id, user_db: "news_comment" })
        .then((data2) => {
            num.value = data2.rows[0]["count(*)"];
        })
        .then(() => {
            selectLike({ detail_id: x.id, user_db: "news_comment", user_id }).then((data) => {
                console.log(data);
                if (data.flat == 0) {
                    flat.value = false;
                } else {
                    flat.value = true;
                }
            });
        });
};
onMounted(() => {
    init(newObj.value);
});
</script>
<style lang="scss">
.userImg,
.sonuserImg {
    overflow: hidden;
    font-size: 0.64rem;
}
.sonShow {
    height: 30px;
    width: 100%;
}
.son {
    padding-top: 40px;
}
.sonTit {
    display: block;
    margin-left: 10px;
    margin-top: 10px;
}
.sonncmm {
    margin-top: 0.2667rem;
    border-bottom: 0.0136rem solid #ededed;
    padding-bottom: 0.2667rem;
    .sonncmmtop {
        padding-top: 0.2667rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .sonuserContent {
            display: flex;
            align-items: center;
        }
        .sonuserImg {
            margin-left: 0.2667rem;
            width: 0.64rem;
            height: 0.64rem;
        }
        .sonuserTitle {
            margin-left: 0.16rem;
        }
        .sonuserRight {
            margin-right: 0.2667rem;
            font-weight: 100;
        }
    }
    .sonncmmMain {
        margin: 0 0.2667rem;
        margin-top: 0.2rem;
        line-height: 0.5333rem;
        font-size: 0.3733rem;
        font-weight: 100;
        word-break: break-all;
        .sonreply {
            margin-top: 0.2rem;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
